<template>
  <div>
    <div class="city-title">定位城市</div>
    <div class="location">
      <div class="location-city">厦门</div>
    </div>
    <div class="history">最近访问城市</div>
    <div class="history-list">
      <div
        class="city-item"
        v-for="(item, i) in historyList"
        :key="i"
        @click="setCity(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="hot">热门城市</div>
    <div class="hot-list">
      <div
        class="city-item"
        v-for="(item, i) in hotArr"
        :key="i"
        @click="setCity(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <van-index-bar :index-list="indexList">
      <template v-for="(item, index) in citylist">
        <van-index-anchor :index="item.initial" :key="index" class="index" />
        <van-cell
          v-for="(i, ind) in item.list"
          :title="i.name"
          :key="index + '-' + ind"
          @click="setCity(i)"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
export default {
  name: "CityView",
  data() {
    return {
      citylist: [],
      historyList: [],
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
      hotArr: [
        { name: "上海", code: 1 },
        { name: "北京", code: 1 },
        { name: "广州", code: 1 },
        { name: "深圳", code: 30 },
        { name: "武汉", code: 1 },
        { name: "天津", code: 1 },
        { name: "西安", code: 1 },
        { name: "南京", code: 1 },
        { name: "成都", code: 1 },
        { name: "杭州", code: 1 },
        { name: "重庆", code: 1 },
      ],
    };
  },
  methods: {
    setCity(item) {
      let history = localStorage.getItem("history");
      let historyArr = JSON.parse(history) || [];
      if (
        !historyArr.some((i) => {
          return i.name === item.name;
        })
      ) {
        historyArr.unshift(item);
        if (historyArr.length > 3) {
          historyArr.length = 3;
        }
      } else {
        let city = historyArr.find((i) => {
          return i.name === item.name;
        });
        historyArr.splice(historyArr.indexOf(city), 1);
        historyArr.unshift(city);
      }
      localStorage.setItem("history", JSON.stringify(historyArr));
      this.$store.commit("changeCity", { id: item.code, name: item.name });
      this.$router.push("/home");
    },
  },
  mounted() {
    this.$axios.get("./json/city.json").then((res) => {
      this.citylist = res.data.city;
    });
    let history = localStorage.getItem("history");
    let historyArr = JSON.parse(history) || [];
    this.historyList = historyArr;
  },
};
</script>

<style scoped>
div {
  color: #333;
  font-size: 14px;
}
.city-title {
  width: 9.6rem;
  height: 0.8rem;
  padding-left: 0.4rem;
  background: #ebebeb;
  line-height: 0.8rem;
}
.location {
  width: 10rem;
  height: 1.2267rem;
  background: #f5f5f5;
  padding-top: 10px;
}
.location-city {
  width: 2.6667rem;
  height: 0.88rem;
  border: 1px solid #ebebeb;
  text-align: center;
  line-height: 0.88rem;
  margin-left: 10px;
  background: #fff;
}
.history {
  width: 9.6rem;
  height: 0.8rem;
  padding-left: 0.4rem;
  background: #ebebeb;
  line-height: 0.8rem;
}
.hot {
  width: 9.6rem;
  height: 0.8rem;
  padding-left: 0.4rem;
  background: #ebebeb;
  line-height: 0.8rem;
}
.hot-list {
  width: 10rem;
  height: 5.3333rem;
  padding-bottom: 13px;
  background: #f5f5f5;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.history-list {
  width: 10rem;
  height: auto;
  padding-bottom: 13px;
  background: #f5f5f5;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.city-item {
  width: 2.6667rem;
  height: 33px;
  border: 1px solid #ebebeb;
  background: #fff;
  text-align: center;
  line-height: 33px;
  margin-left: 14px;
  margin-top: 15px;
}
.index {
  width: 9.6rem;
  height: 0.8rem;
  padding-left: 0.4rem;
  background: #ebebeb;
  line-height: 0.8rem;
}
</style>